<template>
  <div>
    <basePage>
      <el-card>
        <el-row>
          <el-col>
            <el-button type="primary" @click="showCreateDialog">添加权限</el-button>
          </el-col>
        </el-row>
        <el-table :data="roleList" border>
          <el-table-column label="角色" prop="name"></el-table-column>
          <el-table-column label="备注" prop="mark"></el-table-column>
          <el-table-column label="权限" prop="perms_str"></el-table-column>
          <el-table-column label="状态">
            <template scope="scope">
              <el-switch v-model="scope.row.status" active-color="#ff4949"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="showEditDialog(scope.row.id)"
              ></el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="removeRole(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog :title="dialogTitle" :visible.sync="roleDialogVisible" width="50%">
        <el-form :model="roleInfo" :rules="roleInfoRules" ref="roleInfoRef" label-width="100px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="roleInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="备注信息" prop="mark">
            <el-input v-model="roleInfo.mark"></el-input>
          </el-form-item>
          <el-form-item label="系统权限" prop="ids">
            <el-tree
              :data="permissionTreeList"
              show-checkbox
              default-expand-all
              node-key="id"
              ref="tree"
              :check-strictly="true"
              highlight-current
              :props="treeProps"
              @check="changeTree"
            >
            </el-tree>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="roleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="createOrEditRole">确 定</el-button>
        </span>
      </el-dialog>
    </basePage>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleInfo: {},
      roleList: [],
      permissionTreeList: [],
      roleDialogVisible: false,
      dialogTitle: '',
      createRole: null,
      treeProps: {
        children: 'children',
        label: 'title'
      },
      roleInfoRules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        mark: [{ max: 100, message: '请输入100个字符以内的数据' }],
        ids: [{ required: true, message: '请选择系统权限', trigger: 'change', type: 'array' }]
      }
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 获取角色列表
    getRoleList() {
      this.$http
        .get('/sys/role/list')
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.roleList = resData.data.list
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    // 获取权限tree
    getPermissionTree() {
      this.$http
        .get('/sys/permission/permTree')
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.permissionTreeList = resData.data.list
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    // 显示添加角色对话框
    showCreateDialog() {
      this.dialogTitle = '添加角色'
      this.createRole = true
      this.getPermissionTree()
      this.roleDialogVisible = true
    },
    // 显示编辑角色对话框
    showEditDialog(id) {
      this.dialogTitle = '编辑角色'
      this.createRole = false
      this.getPermissionTree()
      this.$http
        .get(`/sys/role/getById?id=${id}`)
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.roleInfo = resData.data[0]
            this.$refs.tree.setCheckedKeys(this.roleInfo.ids)
            console.log(this.roleInfo.ids)
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
      this.roleDialogVisible = true
    },
    // 添加或编辑角色
    createOrEditRole() {
      this.$refs.roleInfoRef.validate(valid => {
        if (valid) {
          if (this.createRole) {
            // 添加角色
            this.$http
              .post('/sys/role/create', this.roleInfo)
              .then(res => {
                const resData = res.data
                if (resData.code === 200) {
                  this.getRoleList()
                  this.$message.success(resData.msg)
                } else {
                  return this.$message.error(resData.msg)
                }
              })
              .catch(err => {
                return this.$message.error(err)
              })
          } else {
            // 编辑角色
            this.$http
              .post('/sys/role/update', this.roleInfo)
              .then(res => {
                const resData = res.data
                if (resData.code === 200) {
                  this.getRoleList()
                  this.roleDialogVisible = false
                  this.$message.success(resData.msg)
                } else {
                  return this.$message.error(resData.msg)
                }
              })
              .catch(err => {
                return this.$message.error(err)
              })
          }
        }
      })
    },
    // 删除角色
    removeRole(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http
            .post('/sys/role/delete', { id: id })
            .then(res => {
              const resData = res.data
              if (resData.code === 200) {
                this.getRoleList()
                return this.$message.success(resData.msg)
              } else {
                return this.$message.error(resData.msg)
              }
            })
            .catch(err => {
              return this.$message.error(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取tree keys
    changeTree() {
      this.roleInfo.ids = this.$refs.tree.getCheckedKeys()
    }
  }
}
</script>

<style lang="less" scoped></style>
